<template>
	<view class="content">
		<view class="page-section page-section-gap">

			<!-- 显示当前位置 -->
			
			<!-- 插入标题图片的插件 -->
			<view style="font-size: 30rpx;">请上传封面</view>
			<view style="float: left;">
				<easy-upload
						:dataList="dataList"
						uploadUrl="https://xunji.xmxland.space/upload"
						deleteUrl='https://xunji.xmxland.space/upload'
						:types="types"
						:uploadCount = 1
						@successImage="successCoverImage"
						@successVideo="successCovervideo"

					/>
				</view>
			<!-- 插入内容图片的插件 -->

			<view v-for="(item,i) in travel.travelList">
				<!-- 输入标题 -->
				<uni-collapse>
				    <uni-collapse-item :title="'第' + (i+1) +'段旅程'" open="true">

						<input class="uni-input" placeholder="填写标题会有更多赞哦~" v-model="item.title" />
						<!-- 输入内容 -->
						<textarea class="uni-textarea" placeholder="说几句话吧~" v-model="item.content"/>
						<!-- 选择日期插件 -->
							<min-popup heightSize="500" v-if="showDate"  @close='close'>
								<min-picker
								:endTime="endTime"
								:startTime="startTimes"
								@cancel="cancel"
								@sure="sure"
								>
								</min-picker>
							</min-popup>

						<view style="text-align: center;border:1px solid #CCCCCC;height: 40px;line-height: 40px;border-radius: 20px;" @click="showPop(i)">{{item.time | dateFilter}}</view>

						<view style="text-align: center;border:1px solid #CCCCCC;height: 40px;line-height: 40px;border-radius: 20px;" @click="getAddressName(i)">
							{{item.address|addressFilter}}
						</view>

						<ehPicker @conceal="conceal" v-if="popup" />
						<view>
							<!-- <image src="../../static/Icon/Location.png"></image> -->
							<view style="font-size: 30rpx;">添加地点</view>
						</view>
						
						<!-- 将地图进行呈现 -->
						<view style="width: 100%; height: 180px;border-radius: 20px;">
							<map style="width: 96%; height: 100%;margin-left: 2%;" :latitude="currentInfo.latitude" :longitude="currentInfo.longitude" :markers="covers" @tap="getlongLat"></map>
			
						</view>
						<view style="font-size: 30rpx;">请上传景点图片：</view>

						<view>
							<easy-upload
									:dataList="coverList"
									uploadUrl="https://xunji.xmxland.space/upload"
									deleteUrl='https://xunji.xmxland.space/upload'
									:types="types"
									:uploadCount = 9
									@successImage="successImage"
									@successVideo="successvideo"
								/>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<button type="primary" style="background-color: #4CD964;" @click="addTravel">添加旅程</button>
			<button type="primary" style="background-color: #4CD964;" @click="save">确认发布</button>
		</view>
	</view>
</template>

<script>
	import easyUpload from '@/components/easy-upload/easy-upload.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			 easyUpload,
			 uniCollapse,
			 uniCollapseItem
		    },
		data() {
			return {
				startTimes:[2010,6,1],
				endTime: 2046,
				showDate:false,
				index:0,
				travel:{
					openId:'0000',
					cover:'',
					travelList:[{
						title:'',
						content:'',
						time:'',
						address:'未定位',
						fengmian:'',
						latitude: 26.036979,
						longitude: 119.216479,
						file:[],
					}]
				},
				dataList: [],
				coverList:[],
				types: 'image',
				popup:false,
				currentInfo:{
					addressName:'未定位',
					latitude: 26.036979,
					longitude: 119.216479,
				}
			}
		},
    created(){
		  //this.init();
    },
    onLoad:function(option){
		  //this.init();
    },
		// 保存的方法
		methods: {
		  init(){
			let userInfo = uni.getStorageSync('userInfo');
			if(userInfo===''||userInfo.openId===''){
			  uni.switchTab({
				url:'../../pages/index/my'
			  })
			}else{
			  this.travel = userInfo.openId;
			}
		  },
			//日期选择器四个方法
			cancel(){this.close()},
			sure(e){
				this.travel.travelList[this.index].time = e.a + "-" + e.b + "-" +e.c;
			},
			showPop(i){
				this.index = i
				if(this.showDate){
					this.showDate = false
				}else{
					this.showDate = true
				}
			},
			close(){
			    this.showDate = false
			},
			getAddressName(i){
				this.index = i
			},

			save(){
				let userInfo = uni.getStorageSync('userInfo');
				if(userInfo===''||userInfo.openId===''){
				  uni.switchTab({
					url:'../../pages/index/my'
				  })
				}else{
				  this.travel.openId = userInfo.openId;
				}
				uni.request({
					url: 'https://xunji.xmxland.space/save',
					"headers": {
						"Content-type": "application/x-www-form-urlencoded",
					},
					method:'POST',
					data: this.travel,
					success: (res) => {
						console.log(res.data);
					}
				});

			},
			getlongLat(e){
				this.travel.travelList[this.index].latitude = e.detail.latitude;
				this.travel.travelList[this.index].longitude = e.detail.longitude;
				this.currentInfo.latitude = e.detail.latitude;
				this.currentInfo.longitude = e.detail.longitude;
				var getAddressUrl = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + e.detail.latitude + "," + e.detail.longitude + "&key=LDVBZ-HARLX-MOS4J-TEYHY-HZJZ2-PVBOO&get_poi=1";
				uni.request({
					url: getAddressUrl,
					method:'GET',
					success: (res) => {
						this.travel.travelList[this.index].address = res.data.result.address;
						this.currentInfo.addressName = res.data.result.address;
					}
				});
			},
			addTravel(){
				let params = {
						title:'',
						content:'',
						time:'',
						address:'未定位',
						fengmian:'',
						latitude: 0,
						longitude: 0,
						file:[],
				}
				this.index = this.index+1;
				this.travel.travelList.push(params)
			},
			getAddress(){
				uni.getLocation({
				    success: function (res) {
						this.addressInfo.lat = res.address.latitude
						this.addressInfo.lon = res.address.longitude
						this.addressInfo.address = res.address.country
				    }
				});
			},
			//返回的内容图片地址
			successImage(data){
				if(data.statusCode === 200){
					this.travel.travelList[this.index].file.push(data.data)
				}
			},
			//返回的内容视频地址
			successvideo(data){
				if(data.statusCode === 200){
					this.travel.travelList[this.index].file.push(data.data)
				}
			},
			//返回的封面图片地址
			successCoverImage(data){
				if(data.statusCode === 200){
					this.travel.cover = data.data
				}
			},
			//返回的封面视频地址
			successCovervideo(data){
				if(data.statusCode === 200){
					this.travel.cover = data.data
				}
			}
		},
		filters:{
			dateFilter(value){
				if(value===''){
					return '请选择日期'
				}else{
					return value
				}
			},
			addressFilter(value){
				if(value==='未定位'){
					return '请在地图上选择地点'
				}else{
					return value
				}
			}
		}
	}
</script>
<style>
	.content {
		width: 100%;
		height: 30%;
	}
	.uni-collapse{
		margin-top: 1%;
		border-radius: 10%;
		width: 96%;
		padding: 0 2%;
	}
	.tabs{
		 border: 1px solid #CCCCCC;
		 margin-top: 10px;
		 height: 40px;
		 border-radius: 10px;
		 padding-left: 5%;
	}
	.uni-input{
		width:98%;
		height: 40px;
		margin-top: 10px;
		border-radius: 10px;
		box-shadow: 0px 4px 0px #EEEEEE;
		border: 1px solid #CCCCCC;
	}
	.uni-textarea{
		width:98%;
		height: 120px;
		margin-top: 20px;
		border-radius: 10px;
		box-shadow: 0px 4px 0px #EEEEEE;
		border: 1px solid #CCCCCC;
	}

	.level-container{
		z-index: 10;
		height: 300px;
		background-color: #FFFFFF;
	}
	.uni-collapse-cell--open{
		background-color: #FFFFFF;
	}
</style>
